<template>
  <div class="productList">
    <nav-top title="香港美容"
             :goback='true'></nav-top>
    <header v-show="false">
      <van-field class="search"
                 v-model="filed"
                 clearable
                 right-icon="search"
                 placeholder="搜索体检产品名称"
                 @click-right-icon="$toast('question')" />
      <div class="type">
        <van-tag :class='{"active" : active == key}'
                 @click="selectType(key)"
                 v-for="(val,key) in typeList"
                 :key='key'
                 class="typeList">{{val.name}}</van-tag>
      </div>
    </header>
    <section class="partTwo">
      <ul>
        <li class="list"
            v-for="(val,key) in productList"
            :key="key" @click="to(val.id)"
            >
            
          <div class='img'>
            <img :src="domain + val.img_url"
                 alt="">
          </div>
          <div class="msg">
            <p class="name">{{val.cat_name}}</p>
            <span class="intro"> {{val.intro}}
            </span>
            <span class="price">
              ¥{{ Math.round(val.price*FixedRate.HK/10)*10 }}
            </span>
          </div>
        </li>
      </ul>
    </section>
    <contact-footer v-show="false"></contact-footer>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";
import ContactFooter from "@/components/footer/contactFooter";
import { domain } from './../../api'
import axios from 'axios';
export default {
  name: "ProductList",
  components: {
    NavTop,
    ContactFooter
  },

  data () {
    return {
      FixedRate: {
        HK:0.92,
      },
      loading: false,
      finished: false,
      domain: 'http://www.likehealth.com.cn',
      filed: '',
      productList: [],
      offset:0,
      limit:1,
      typeList: [{ id: 1, name: '所有项目' },
      { id: 2, name: '专项体检' },
      { id: 3, name: '综合体检' },
      { id: 4, name: '心血管' },
      { id: 5, name: '人工受孕' },
      ],
      active: 0
    };
  }, 
  methods: {
    onLoad(){
      // 异步更新数据         
        
    },
    getData(){
      axios.post(domain+"/api/old/product/list?type=4&fid=17&offset="+this.offset+"&limit="+this.limit)
        .then((res)=>{
         if(res.data.code==1){
            this.productList.push(res.data.data[0])
            this.offset = this.offset + 1
            console.log(res.data.data.length,this.productList)
            if(res.data.data.length != 0){
              this.getDate()
            }
        }
          this.finished = true;
          this.loading = false;
        })
        .catch((err)=>{
          this.finished = true;
          this.loading = false;
        })
    },
    to(id){
      window.location.href = '/hongkong/product/detail?id='+id+"&product_from=medicalbeauty"
    },
    selectType (key) {
      this.active = key
    }
  },
  created:function(){
    axios.post(domain+"/api/FixedRate")
    .then((res)=>{
      this.FixedRate = res.data.data
      // 体检
       this.getData()
       /*
      this.productList = []
      axios.post(domain+"/api/old/product/list?type=4&fid=17&offset="+this.offset+"&limit="+this.limit)
      .then((res)=>{
        if(res.data.code==1){
          this.productList = res.data.data
        }
      })
      .catch((err)=>{

      })
      */
    })
    .catch((err)=>{

    })
    
  }
};
</script>

<style lang='scss' scoped>
.productList {
  margin-top: 60px;
  .search {
    margin-top: 50px;
    height: 30px;
    padding: 0 23px;
    border-bottom: 1px solid #E6E6E6;
    input {
      line-height: 33px;

      :-ms-input-placeholder {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(194, 194, 194, 1);
      }
    }
  }
  .search::after {
    border: none;
  }
  .type {
    margin-left: 12px;
    .typeList {
      margin-left: 9px;
      margin-top: 7px;
      width: 63px;
      padding: 0;
      height: 20px;
      background: #f5f5f5 !important;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(126, 126, 126, 1);
      text-align: center;
      line-height: 20px;
    }
    .active {
      background: #06a44f !important;
      color: #fff !important;
    }
  }
  .list {
    display: flex;
    margin: 11px auto;
    width: 300px;
    height: 110px;
    border: 3px solid #f8f8f8;
    border-radius: 5px;
    .img {
      margin: 13px 0 17px 13px;
      img {
        width: 83px;
        height: 83px;
      }
    }
    .msg {
      margin: 16px 0 0 8px;
      .name {
        padding-right: 25px;
        margin: 0;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /*! autoprefixer: on */
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .intro {
        margin-top: 8px;
        padding-right: 25px;
        font-size: 11px;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /*! autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        display: block;
        margin-top: 8px;
        margin-left: 7px;
        font-size: 13px;
        font-weight: bold;
        color: rgba(27, 162, 83, 1);
      }
      span {
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
}
</style>